<template>
  <div v-loading="loading">
    <div class="piece-title">
      {{ this.$route.meta.title || '' }}
    </div>
    <EditableList
      :columns="columns"
      :data="detail"
      :isEdit="isEdit"
      :buttons="buttons"
      :rules="rules"
    />
    <!-- <TableSearch
      v-if="isAllowedSettlement()"
      v-loading="tableLoading"
      ref="tableSearch"
      :columns="tableColumns"
      :tableData="tableData"
      :pageNameDisplay="false"
    /> -->
    <MobileDialog
      :visible.sync="mobileDlgVisible"
      :userInfo="userInfo"
      @refresh="refresh"
    />
    <SettlementStatusDlg
      v-if="SSDlgVisible"
      :visible.sync="SSDlgVisible"
      :data="SSDlgData"
    />
  </div>
</template>
<script>
import {
  getMyDetails,
  updateMyDetails,
  applymentMicroGetstate,
} from '@/api/mySelf'
import EditableList from '@/components/EditableList'
import MobileDialog from './components/MobileDialog'
import { typeMap } from '@/utils/format'
import TableSearch from '@/components/TableSearch'
import SettlementStatusDlg from '@/components/SettlementStatusDlg'
import dayjs from 'dayjs'

// const merchantType = {
//   ANOTHER: '其他运营方',
//   CMCC: '中国移动',
//   CTT: '中国铁通',
// }

const APPLYMENT_STATE = {
  APPLYMENT_STATE_EDITTING: '编辑中',
  APPLYMENT_STATE_AUDITING: '审核中',
  APPLYMENT_STATE_REJECTED: '已驳回',
  APPLYMENT_STATE_TO_BE_CONFIRMED: '待账户验证',
  APPLYMENT_STATE_TO_BE_SIGNED: '待账户验证',
  APPLYMENT_STATE_SIGNING: '开通权限中',
  APPLYMENT_STATE_FINISHED: '已完成',
  APPLYMENT_STATE_CANCELED: '已作废',
}

export default {
  name: 'MyselfInfo',
  components: { EditableList, MobileDialog, TableSearch, SettlementStatusDlg },
  mounted() {
    this.getDetails()
    this.getWxStatus(false)
  },
  watch: {
    isEdit(val) {
      if (val) {
        this.updateRenderButton('确定', 'hidden', false)
        this.updateRenderButton('取消', 'hidden', false)
        this.updateRenderButton('修改基本信息', 'hidden', true)
        this.updateRenderButton('修改手机号', 'hidden', true)
        this.updateRenderButton('修改密码', 'hidden', true)
        if (this.$store.getters.userData.merchantType) return
        this.updateRenderButton('完善商户资料', 'hidden', true)
      } else {
        this.updateRenderButton('确定', 'hidden', true)
        this.updateRenderButton('取消', 'hidden', true)
        this.updateRenderButton('修改基本信息', 'hidden', false)
        this.updateRenderButton(
          '修改手机号',
          'hidden',
          window.self !== window.parent &&
            localStorage.getItem('IFRAME_ORIGIN') === 'gd-platform'
            ? true
            : false
        )

        //广东平台嵌入，不可修改手机号码
        this.updateRenderButton(
          '修改密码',
          'hidden',
          window.self !== window.parent &&
            localStorage.getItem('IFRAME_ORIGIN') === 'gd-platform'
            ? true
            : false
        )
        //广东平台嵌入不可修改密码
        if (this.$store.getters.userData.merchantType) return
        this.updateRenderButton('完善商户资料', 'hidden', false)
      }
    },
  },
  computed: {
    userInfo() {
      return {
        mobile: this.detail.mobile,
      }
    },
  },
  data() {
    return {
      loading: false,
      tableLoading: false,
      tableData: {},
      SSDlgData: {},
      tableColumns: [
        {
          label: '进件类型',
          prop: 'name',
        },
        {
          label: '状态',
          prop: 'statusEesc',
          formatter: (row) => {
            return row.statusEesc || '-'
          },
        },
        {
          label: '操作',
          buttons: [
            {
              label: '添加',
              disabled: (row) => {
                return (
                  row.status == 'FINISH' ||
                  row.status == 'APPLYMENT_STATE_FINISHED' ||
                  row.status == '99'
                )
              },
              click: () => {
                this.$router.push(`/myself/wxPay/${this.$store.getters.userId}`)
              },
              resourceId:
                '/web/myInformation-management/basicInformation-management/添加',
            },
            {
              label: '获取状态',
              click: () => {
                this.getWxStatus(true)
              },
              disabled: (row) => {
                return !row.status
              },
              resourceId:
                '/web/myInformation-management/basicInformation-management/获取状态',
            },
            // {
            //   label: '更改银行卡',
            //   click: () => {},
            //   resouceId: ''
            // },
          ],
        },
      ],
      mobileDlgVisible: false,
      SSDlgVisible: false,
      detail: {},
      isEdit: false,
      rules: {},
      columns: [
        {
          label: '运营商名',
          value: 'userName',
          isEditable: true,
          required: true,
          clearable: true,
        },
        {
          label: '手机号',
          value: 'mobile',
        },
        {
          label: '客服电话',
          value: 'serviceMobile',
          isEditable: true,
          required: true,
          clearable: true,
        },
        {
          label: '地区',
          value: 'areaName',
          isEditable: true,
          required: true,
          clearable: true,
        },
        {
          label: '管理员姓名',
          value: 'name',
          isEditable: true,
          required: true,
          clearable: true,
        },
        {
          label: '运营商类型',
          value: 'merchantType',
          formatter: () => {
            // return merchantType[data.merchantType] || '/'
            return typeMap.userType[this.$store.getters.userData.type] || '/'
          },
        },
        {
          label: '分账比例',
          value: 'splitValue',
          formatter: (data) => {
            return data.splitValue ? data.splitValue + '%' : '-'
          },
        },
        {
          label: '注册时间',
          value: 'createTime',
        },
        //  {
        //    label: '用户路径',
        //    value: ''
        //  },
      ],
      buttons: [
        // {
        //   label: '修改基本信息',
        //   type: 'success',
        //   click: () => {
        //     this.isEdit = !this.isEdit
        //   },
        //   resourceId:
        //     '/web/myInformation-management/basicInformation-management/修改基本信息',
        //   hidden: false,
        // },
        // {
        //   label: '修改手机号',
        //   type: 'primary',
        //   click: this.handleUpdateMobile,
        //   resourceId:
        //     '/web/myInformation-management/basicInformation-management/修改手机号',
        //   hidden: () => {
        //     return window.self !== window.parent &&
        //       localStorage.getItem('IFRAME_ORIGIN') === 'gd-platform'
        //       ? true
        //       : false
        //   },
        // },
        {
          label: '修改密码',
          type: 'warning',
          click: () => {
            this.$router.push('/myself/revisePas')
          },
          resourceId:
            '/web/myInformation-management/basicInformation-management/修改密码',
          hidden: () => {
            return window.self !== window.parent &&
              localStorage.getItem('IFRAME_ORIGIN') === 'gd-platform'
              ? true
              : false
          },
        },
        // {
        //   label: '完善商户资料',
        //   type: 'success',
        //   click: () => {
        //     this.$router.push('/myself/agentInfoPerfect')
        //   },
        //   resourceId:
        //     '/web/myInformation-management/basicInformation-management/完善账户资料',
        //   hidden: () => {
        //     if (this.$store.getters.userData.createUserType !== 'ADMIN')
        //       return true
        //     return (
        //       !!this.$store.getters.userData.merchantType &&
        //       this.$store.getters.userData.type !== 'STAFF'
        //     )
        //   },
        // },
        {
          label: '确定',
          type: 'success',
          handleEdit: true,
          click: this.handleUpdateBasic,
          resourceId:
            '/web/myInformation-management/basicInformation-management/修改基本信息',
          hidden: true,
        },
        {
          label: '取消',
          type: 'warning',
          click: () => {
            this.isEdit = false
          },
          resourceId:
            '/web/myInformation-management/basicInformation-management/修改基本信息',
          hidden: true,
        },
      ],
    }
  },
  methods: {
    isAllowedSettlement() {
      return this.$store.getters.resourceSet.includes(
        '/web/myInformation-management/basicInformation-management/小微商户进件'
      )
    },
    getWxStatus(bool) {
      return false
      if (!this.isAllowedSettlement()) return
      this.tableLoading = true
      applymentMicroGetstate({
        submitUserId: this.$store.getters.userId,
      })
        .then((res) => {
          let list = [
            {
              name: '小微商户',
              statusEesc: '',
              status: '',
            },
          ]
          if (
            Object.prototype.hasOwnProperty.call(res, 'applyment_state_msg')
          ) {
            // 字段兼容，新接口
            res.applyment_state_desc = APPLYMENT_STATE[res.applyment_state]
          }

          list[0].statusEesc = res.applyment_state_desc
          list[0].status = res.applyment_state

          this.tableData = {
            list,
            totalCount: 1,
          }

          if (bool) {
            this.SSDlgVisible = true
            this.SSDlgData = res
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    handleUpdateBasic(form) {
      if (!this.$store.getters.userId) return
      let params = {
        ...form,
        id: this.$store.getters.userId,
      }

      updateMyDetails(params)
        .then(() => {
          this.$message({
            type: 'success',
            showClose: true,
            message: '修改成功',
          })

          this.isEdit = false
          this.getDetails()
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getDetails() {
      if (!this.$store.getters.userId) return

      this.loading = true
      getMyDetails({ id: this.$store.getters.userId })
        .then((res) => {
          this.detail = res
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    refresh() {
      this.isEdit = false

      this.getDetails()
    },
    handleUpdateMobile() {
      this.isEdit = false
      this.mobileDlgVisible = true
    },
    updateRenderButton(label, attrStr, val) {
      let targertIndex = this.buttons.findIndex((item) => item.label === label)
      if (targertIndex == -1) return

      this.$set(this.buttons, targertIndex, {
        ...this.buttons[targertIndex],
        [attrStr]: val,
      })
    },
  },
}
</script>
